import React, { useEffect, useContext, useState, useMemo } from 'react'
import myContext from '../usecontext.js'
import * as  echarts from 'echarts'


export default function CommandStatistics() {
  const info = useContext(myContext);

  useEffect(() => {
    initCharts()
  }, [info])

  //初始化
  const initCharts = () => {
    let myChart = echarts.init(document.getElementById('myChart'));
    let option = {
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: info.commandStats
          // data: [
          //   { value: 1048, name: 'Search Engine' },
          //   { value: 735, name: 'Direct' },
          //   { value: 580, name: 'Email' },
          //   { value: 484, name: 'Union Ads' },
          //   { value: 300, name: 'Video Ads' }
          // ]
        }
      ]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

  return (
    <div>
      <div id='myChart' style={{ width: '591px', height: '420px' }}></div>
    </div>
  )
}
